<template>
    <div :class="lineTextClass">
        <div class="line-label title-color">{{label}}</div>
        <div v-if="type === 'single'" class="line-value" @click="linkAction">
            <div class="value">{{value}}</div>
            <MiniIcon v-if="isLink" name="right" :mode="mode" :styleMode="styleMode" theme="#7D7D83" :size="14" />
        </div>
        <div v-else class="val-lines">
            <div class="line-value" v-for="item in value" :key="item">{{item}}</div>
        </div>
    </div>
</template>

<script>
import MiniIcon from './MiniIcon';
import ModeMixin from '@common/mixin';
export default {
    name: 'LineText',
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        size: {
            type: String,
            default: 'normal', // normal small large
        },
        type: {
            type: String,
            default: 'single', // single multi
        },
        label: {
            type: String,
            default: 'Label',
        },
        value: [String, Number, Array],
        mode: {
            type: String,
            value: 'white',
        },
        isLink: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        lineTextClass() {
            const { size, mode } = this.$props;
            return `tech-line-text line-text-size-${size} ${mode}`;
        },
    },
    methods: {
        linkAction() {
            this.$emit('link');
        },
    },
};
</script>

<style lang="less">
.tech-line-text {
    .flex();
    .font-size();
    .p-v(@gap);
    .mode-white();
    .line-label {
        .m-r(@gap-sm);
        color: @text-color;
    }
    .val-lines {
        .flex-column();
    }
    .line-value {
        flex: 1;
        .t-r();
        color: @tip-color;
        .flex();
        justify-content: flex-end;
        .value {
            width: 230px;
            .text-overflow();
        }
    }
    &.line-text-size-normal {
        .font-size();
    }
    &.line-text-size-small {
        .font-size-sm();
    }
    &.line-text-size-large {
        .font-size-md();
    }
}
</style>

